<template>
  <div class="fwgx">
    <Card title="服务详情">
      <div slot="cRight">
        <el-button type="primary" size="mini">更新POD</el-button>
        <el-button type="primary" size="mini">删除版本</el-button>
        <el-button type="primary" size="mini">新增版本</el-button>
        <el-button type="primary" size="mini">停止服务</el-button>
        <el-button type="primary" size="mini">更新标签</el-button>
      </div>
      <el-form size="mini" inline>
        <el-form-item label="服务名称">
          <el-input v-model="valA"></el-input>
        </el-form-item>
        <el-form-item label="分 区">
          <el-input v-model="valB"></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="valC"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="valD"></el-input>
        </el-form-item>
        <el-form-item label="所有者">
          <el-input v-model="valE"></el-input>
        </el-form-item>
        <el-form-item label="设置副本">
          <el-select placeholder="请选择" v-model="valF">
            <el-option label="0无限" :value="1"> </el-option>
            <el-option label="1" :value="2"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="容器详情">
      <Table :tableData="tableData" />
    </Card>
    <Card title="POD详情">
      <Table :tableData="tableDataA" />
      <Pagination :total="tableDataA.row.length" />
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Card,
    Table,
    Pagination
  },

  data() {
    return {
      valA: 'abs-server-product',
      valB: 'abs-server-user',
      valC: 'v2',
      valD: 'Deleplement',
      valE: 'abs-server-user',
      valF: 1,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '容器名字'
          },
          {
            prop: 'colB',
            label: '镜像',
            width: '250px'
          },
          {
            prop: 'colC',
            label: 'CPU'
          },
          {
            prop: 'colD',
            label: '内存'
          },
          {
            prop: 'colE',
            label: '端口'
          },
          {
            prop: 'colF',
            label: '状态'
          }
        ],
        row: [
          {
            colA: 'cakl-0',
            colB: '119.24.22.112/boosmfasp/fdsja/mfafd',
            colC: 'Unlimited',
            colD: 'Unlimited',
            colE: 'CP:8789',
            colF: 'running'
          }
        ]
      },
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: 'pod名称'
          },
          {
            prop: 'colB',
            label: 'pod IP',
            width: '250px'
          },
          {
            prop: 'colC',
            label: '主机IP'
          },
          {
            prop: 'colD',
            label: '重启次数'
          },
          {
            prop: 'colE',
            label: '运行时间'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            width: '250px',
            btnList: [{ label: '停止' }, { label: '控制台' }, { label: '日志' }]
          }
        ],
        row: [
          {
            colA: 'cakl-0',
            colB: '119.24.22.112/boosmfasp/fdsja/mfafd',
            colC: 'Unlimited',
            colD: 'Unlimited',
            colE: 'CP:8789',
            colF: 'running'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
